<div>
  <Row :gutter="20">
    <i-col span="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;">
      <InfoCard shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
        <div class="count-to-wrapper">
          <p class="content-outer"><span :class="['count-to-count-text', 'count-style']">{{ infor.count }}</span><i
              :class="['count-to-unit-text']"></i></p>
        </div>
        <p>{{ infor.title }}</p>
      </InfoCard>
    </i-col>
  </Row>
  <Row :gutter="20" style="margin-top: 20px;">
    <i-col span="8">
      <Card shadow>
        <ChartPie style="height: 300px;" :value="pieData" text="用户访问来源"></ChartPie>
      </Card>
    </i-col>
    <i-col span="16">
      <Card shadow>
        <ChartBar style="height: 300px;" :value="barData" text="每周用户活跃量" />
      </Card>
    </i-col>
  </Row>
</div>
<style>
.count-to-wrapper .content-outer {
  display: inline-block;
}
.count-to-wrapper .content-outer .count-to-unit-text {
  font-style: normal;
}
</style>
